<template>
  <a-radio-group v-if="tagType=='radio'" @change="handleInput" :value="getValueSting" :disabled="disabled">
    <a-radio v-for="(item, key) in dictOptions" :key="key" :value="item.value">{{ item.title }}</a-radio>
  </a-radio-group>

  <a-radio-group v-else-if="tagType=='radioButton'" buttonStyle="solid" @change="handleInput" :value="getValueSting"
                 :disabled="disabled">
    <a-radio-button v-for="(item, key) in dictOptions" :key="key" :value="item.code">{{ item.title }}</a-radio-button>
  </a-radio-group>

  <a-checkbox-group v-else-if="tagType=='checkbox'" @change="handleInput" :value="getValueSting" :disabled="disabled">
    <a-checkbox v-for="(item, key) in dictOptions" :key="key" :value="item.code"  :style="{width: dictOptions.length==5?'19%':'24%'}"  style="float:left">{{item.title}}</a-checkbox>
    <!-- <a-checkbox v-for="(item, key) in dictOptions" :key="key" :value="item.code" :style="{width: dictOptions.length==5?'19%':'24%'}" style="text-overflow: ellipsis;overflow: hidden;white-space: nowrap;"><j-ellipsis :value="item.title" :length="12"></j-ellipsis></a-checkbox> -->
  </a-checkbox-group>

  <a-select v-else-if="tagType=='select'" :getPopupContainer="getPopupContainer" :placeholder="placeholder"
            :disabled="disabled" :value="getValueSting" @change="handleInput">
    <a-select-option :value="undefined">请选择</a-select-option>
    <a-select-option v-for="(item, key) in dictOptions" :key="key" :value="item.code">
      <span style="display: inline-block;width: 100%" :title=" item.title">
        {{ item.title }}
      </span>
    </a-select-option>
  </a-select>
</template>

<script>
import {ajaxGetDictItems, getDictItemsFromCache, serviceAjaxGetDictItems, sysAjaxGetDictItems} from '@/api/api'
import JEllipsis from '@/components/jeecg/JEllipsis'

export default {
  name: "JDictSelectTag",
  props: {
    data:Array,
    placeholder: String,
    triggerChange: Boolean,
    disabled: Boolean,
    value: [String, Number],
    type: String,
    getPopupContainer: {
      type: Function,
      default: (node) => node.parentNode
    }
  },
  data() {
    return {
      dictOptions: [],
      tagType: ""
    }
  },
  watch: {
    data: {
      immediate: true,
      handler() {
        this.initDictData()
      },
    },
    
  },
  created() {
    if (!this.type || this.type === "list") {
      this.tagType = "select"
    } else {
      this.tagType = this.type
    }
    //获取字典数据
    // this.initDictData();
  },
  computed: {
    getValueSting() {
      // update-begin author:wangshuai date:20200601 for: 不显示placeholder的文字 ------
      // 当有null或“” placeholder不显示
      if(this.tagType!='checkbox') {
        return this.value != null ? this.value.toString() : undefined;
      }else{
        return this.value != null ?  this.value.split(",") : undefined;
      }
      // update-end author:wangshuai date:20200601 for: 不显示placeholder的文字 ------
    },
  },
  methods: {
    initDictData() {
      this.dictOptions=this.data;
    },
    handleInput(e) {
      let val;
      if (this.tagType == "radio") {
        val = e.target.value
      } else if(this.tagType == "checkbox"){
        //2022/9/6  新增checkbox单选 createby yj
        //只选中一个时，结果为第一个
        val = e[0]
        //当已经选中一个，再重新选中时，替换为新的
        if(e.length>1){
          val = e[1]
        }
      }else {
        val = e
      }
      console.log(e);
      if (this.triggerChange) {
        this.$emit('change', val);
      } else {
        this.$emit('input', val);
        this.$emit('blur', val);
      }
    },
    setCurrentDictOptions(dictOptions) {
      this.dictOptions = dictOptions
    },
    getCurrentDictOptions() {
      return this.dictOptions
    }
  }
}
</script>

<style scoped>

</style>
